<template>
  <view class="p-4 flex flex-wrap gap-x-4">
    <view
      v-for="item in pagination.list"
      :key="item.id"
      class="w-88 bg-white rounded-2xl p-3 pb-0 mb-4"
    >
      <view class="w-full">
        <view class="flex justify-between items-center mb-2">
          <text class="font-bold text-xl text-black truncate w-54">{{
            item.processInstance.name
          }}</text>
          <text
            class="px-2 py-1 rounded-xl bg-indigo-100 text-blue-600 text-sm font-medium"
            >查看详情</text
          >
        </view>
        <view class="w-full truncate mb-2">
          <text class="truncate"
            >单行文本:54354455465465465xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text
          >
        </view>
        <view class="w-full truncate mb-2">
          <text class="truncate">单行文本:543544554654654584864</text>
        </view>
        <view class="flex justify-between items-center text-sm mb-2">
          <view class="flex items-center">
            <view class="mr-3">
              <image
                :src="'/static/images/avatar1.jpg'"
                class="w-8 h-8 rounded-full"
                mode="scaleToFill"
              />
            </view>
            <text class="truncate w-36">{{
              item.processInstance.startUser.nickname
            }}</text>
          </view>
          <text class="text-orange-500"
            >{{ getTimeDifference(item.createTime) }}以前到达</text
          >
        </view>
      </view>
      <view
        class="flex justify-between h-14 items-center border-solid border-b-0 border-x-0 border-t-[1px] border-[#E3E2E2]"
      >
        <view
          class="w-1/2 h-14 flex justify-center items-center border-solid border-b-0 border-r-1 border-l-0 border-t-0 border-[#E3E2E2]"
          @click="reject"
        >
          <text class="text-blue-500 text-lg">拒绝</text>
        </view>
        <view
          class="w-1/2 h-14 flex justify-center items-center"
          @click="agree"
        >
          <text class="text-blue-500 text-lg">同意</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getTimeDifference } from '@/utils/dateUtil'
const props = defineProps({
  pagination: {
    type: Object,
    default() {
      return {}
    }
  }
})
// todo 拒绝流程功能
function reject() {}
// todo 同意流程功能
function agree() {}
</script>

<style lang="scss" scoped></style>
